<template>
    <view class="gjl-view">
        <view class="main">
            <view class="main-form">
                <view class="form-li">
                    <view class="blue-title6">
                        姓名
                    </view>
                    <view class="input-box">
                        <input class="uni-input" v-model="form.memberTrueName" />
                        <view class="placeholder-box" v-if="!form.memberTrueName">
                            请输入姓名
                        </view>
                    </view>
                </view>
                <view class="form-li">
                    <view class="blue-title6">
                        身份证号
                    </view>
                    <view class="input-box">
                        <input class="uni-input" v-model="form.memberCard" />
                        <view class="placeholder-box" v-if="!form.memberCard">
                            请输入身份证号
                        </view>
                    </view>
                </view>
                <!-- <view class="form-li">
                    <view class="blue-title6">
                        推荐人ID（选填）
                    </view>
                    <view class="input-box">
                        <input class="uni-input" v-model="form.id" />
                        <view class="placeholder-box" v-if="!form.id">
                            请输入推荐人ID（选填）
                        </view>
                    </view>
                </view> -->
            </view>
            <view class="main-bottom" @click="doForm">
                立刻申请
            </view>
        </view>
        <showModel ref="model">
            <view class="model-main">
                <view class="tip-img">
                    <image src="https://img.thumbrary.com/lingdang.png" mode=""></image>
                </view>
                <view class="tip-title">
                    很抱歉<br>您还不是拇指会员
                </view>
                <view class="tip-text">
                    如需加入合伙人，请先购买会员
                </view>
                <view class="btn-box">
                    <view class="cancle" @click="cancle">
                        取消
                    </view>
                    <view class="beVip" @click="beVip">
                        成为会员
                    </view>
                </view>
            </view>
        </showModel>
        <!-- <showModel ref="model">
            <view class="model-main">
                <view class="tip-img">
                    <image src="../../static/imgs/success.png" mode=""></image>
                </view>
                <view class="tip-title">
                    很抱歉<br>您还不是拇指会员
                </view>
                <view class="tip-text">
                    如需加入合伙人，请先购买会员
                </view>
                <view class="btn-box">
                    <view class="beVip" @click="konw">
                        我知道了
                    </view>
                </view>
            </view>
        </showModel> -->
    </view>
</template>

<script>
    import showModel from '@/components/show-model/show-model.vue'
    import service from "@/service";
    import {getUserInfo} from '@/util/commonFn.js'
    export default {
        components:{
            showModel
        },
        data(){
            return{
                form:{
                    memberTrueName: '',
                    memberCard: '',
                    id: ''
                }
            }
        },
        computed:{
            vipCardNum(){
                return this.$store.getters.vipCardNum
            }
        },
        onShow() {
            if (!this.$store.getters.vipCardNum) {
                this.$refs.model.showModel()
            }
        },
        methods:{
            cancle() {
                this.$refs.model.closeModel()
            },
            // 成为会员
            beVip() {
                uni.setStorage({
                    key: 'formCopartner',
                    data: '1',
                    success: () => {
                        this.$routerTo({
                            path: '/pagesMine/vip/index'
                        })
                    }
                });
            },
            konw(){
                this.$refs.model.closeModel()
            },
            doForm(){
                if(!this.vipCardNum){
                    this.$refs.model.showModel()
                    return
                }
                if(!this.form.memberTrueName){
                    uni.showToast({
                        title: '请输入姓名',
                        icon: 'none'
                    })
                    return
                }
                if(!this.form.memberCard){
                    uni.showToast({
                        title: '请输入身份证号',
                        icon: 'none'
                    })
                    return
                }
                if(!this.$utils.checkIDCard(this.form.memberCard)){
                    uni.showToast({
                        title: '请输入正确的身份证号',
                        icon: 'none'
                    })
                    return
                }
                service.mineService.addShare({
                    data: {...this.form},
                    success: res => {
                        uni.navigateBack({
                            delta: 2
                        })
                        getUserInfo().then((res)=>{
                            uni.navigateTo({
                                url: '/pagesMine/copartner/index'
                            })
                        })
                    },
                    fail: ()=>{
                    },
                    complete: () => {
                        uni.hideLoading();
                    },
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .gjl-view{
        background:rgba(249,249,249,1);
        min-height: 100%;
        overflow: hidden;
        .model-main {
            box-sizing: border-box;
            padding: 0 20rpx;
            width: 560rpx;
            height: 481rpx;
            background-color: #fff;
            border: 1px solid rgba(112, 112, 112, 1);
            border-radius: 8rpx;
            text-align: center;

            .tip-img {
                margin: -72rpx auto 0;
                height: 180rpx;
                width: 180rpx;

                image {
                    height: 100%;
                    width: 100%;
                    border-radius: 50%;
                }
            }

            .tip-title {
                margin-top: 40rpx;
                font-size: 36rpx;
                font-weight: bold;
                color: rgba(51, 51, 51, 1);
            }

            .tip-text {
                font-size: 28rpx;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
            }

            .btn-box {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 85rpx;

                .cancle {
                    padding: 23rpx 95rpx;
                    border: 1px solid rgba(43, 168, 252, 1);
                    font-size: 30rpx;
                    font-weight: 400;
                    color: rgba(43, 168, 252, 1);
                }

                .beVip {
                    padding: 23rpx 65rpx;
                    background: rgba(43, 168, 252, 1);
                    font-size: 30rpx;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                }
            }
        }
        // .model-main {
        //     box-sizing: border-box;
        //     padding: 0 20rpx;
        //     width: 540rpx;
        //     height: 508rpx;
        //     background-color: #fff;
        //     border: 1px solid rgba(112, 112, 112, 1);
        //     border-radius: 8rpx;
        //     text-align: center;

        //     .tip-img {
        //         margin: -65rpx auto 0;
        //         height: 198rpx;
        //         width: 203rpx;
        //         image {
        //             height: 100%;
        //             width: 100%;
        //         }
        //     }

        //     .tip-title {
        //         margin-top: 5rpx;
        //         font-size:32rpx;
        //         font-weight:bold;
        //         color:rgba(51,51,51,1);
        //     }

        //     .tip-text {
        //         margin-top: 24rpx;
        //         font-size:28rpx;
        //         font-weight:400;
        //         color:rgba(51,51,51,1);
        //     }

        //     .btn-box {
        //         display: flex;
        //         align-items: center;
        //         justify-content: center;
        //         margin-top: 56rpx;
        //         .beVip {
        //             padding: 22rpx 99rpx;
        //             background:rgba(43,168,252,1);
        //             box-shadow:0px 2px 10px rgba(43,168,252,0.31);
        //             border-radius:44px;
        //             font-size:32rpx;
        //             font-weight:bold;
        //             color:rgba(255,255,255,1);
        //         }
        //     }
        // }
        .main{
            margin: 32rpx 0 0;
            padding: 26rpx 30rpx 57rpx;
            background:rgba(255,255,255,1);
            border-radius:10rpx;
            .main-form{
                .form-li + .form-li{
                    margin-top: 40rpx;
                }
                .form-li{
                    .blue-title6{
                        position: relative;
                        padding-left: 24rpx;
                        font-size:28rpx;
                        font-weight:bold;
                        color:rgba(51,51,51,1);
                    }
                    .input-box{
                        padding: 0 24rpx;
                        position: relative;
                        border:1px solid rgba(229,229,229,1);
                        height: 88rpx;
                        margin-top: 20rpx;
                        .uni-input{
                            height: 100%;
                        }
                        .placeholder-box{
                            position: absolute;
                            top: 50%;
                            left: 24rpx;
                            transform: translateY(-50%);
                            font-size:28rpx;
                            font-weight:400;
                            color:rgba(153,153,153,1);
                        }
                    }
                }
            }
            .main-bottom{
                text-align: center;
                margin-top: 72rpx;
                padding: 24rpx 0;
                background:rgba(43,168,252,1);
                border-radius:8rpx;
                font-size:28rpx;
                font-weight:400;
                color:rgba(255,255,255,1);
            }
        }
    }

</style>
